<template>
    <div class="third">
        <div class="third-head">
            <h5 class="head1-h5">工作概况</h5>
        </div>
        <div style="margin-top: 20px; margin-left: 20px;">
            <el-row>
                <el-col style="height: 80px; width: 200px; position: relative;">
                    <div class="div1">
                        <img src="../../assets/images/qie1.png" style="width: 60px;height: 60px;">
                    </div>
                    <h3 class="div1-num">{{ this.$store.state.noDo }}</h3>
                    <h5 class="div1-word">未处理</h5>
                </el-col>
                <el-col style="height: 80px; width: 200px;  position: relative;  margin-left: 19px;">
                    <div class="div1" style="background: #8E42E3;">
                        <img src="../../assets/images/qie2.png" style="width: 60px;height: 60px;">
                    </div>
                    <h3 class="div1-num">12</h3>
                    <h5 class="div1-word">可领工单</h5>
                </el-col>
            </el-row>
            <el-row style="margin-top: 15px;">
                <el-col style="height: 80px; width: 200px;  position: relative;">
                    <div class="div1" style="background: #F59A23;">
                        <img src="../../assets/images/qie3.png" style="width: 60px;height: 60px;">
                    </div>
                    <h3 class="div1-num">0</h3>
                    <h5 class="div1-word">逾期</h5>
                </el-col>
                <el-col style="height: 80px; width: 200px;  position: relative; margin-left: 19px;">
                    <div class="div1" style="background: #3BC997;">
                        <img src="../../assets/images/qie4.png" style="width: 60px;height: 60px;">
                    </div>
                    <h3 class="div1-num">{{ this.$store.state.creater }}</h3>
                    <h5 class="div1-word">已处理</h5>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
.third {
    width: calc((100% - 518px) / 3);
    height: 257.5px;
    background: white;
    box-shadow: 0px 3px 6px 0px #E1E1E1;

    .third-head {
        width: 100%;
        height: 40px;
        border-bottom: 1px solid #EBEEF5;

        .head1-h5 {
            height: 22px;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 22px;
            float: left;
            margin-left: 20px;
            margin-top: 10px;
        }
    }

    .div1 {
        width: 80px;
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #42A8E3;
        border-radius: 6px;
        opacity: 0.2;
    }

    .div1-num {
        width: 24px;
        height: 28px;
        font-size: 24px;
        font-family: DINAlternate-Bold, DINAlternate;
        font-weight: bold;
        color: #42A8E3;
        line-height: 28px;
        position: absolute;
        left: 100px;
        bottom: 42px;
    }

    .div1-word {
        width: 48px;
        height: 17px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 17px;
        position: absolute;
        left: 100px;
        bottom: 10px;
    }
}
</style>